@extends('admin.layout.base')
@section('styles')
    <style>
        .ad-img {
            width: 210px;
            height: 140px;
            border: 1px dashed #d9d9d9;
            display: block;
        }
        .ad-uploader-icon {
            cursor: pointer;
            font-size: 28px;
            color: #8c939d;
            width: 210px;
            height: 140px;
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            line-height: 150px;
            text-align: center;
        }
    </style>
@endsection
@section('content')
    <div class="panel-content" id="app" v-cloak>
        <div class="panel-body panel-info">
            <el-form :model="form" ref="form" class="form" label-width="100px">
                <div class="panel-header"> <div class="panel-title"> 基本信息 </div> </div>
                <div class="panel-main">
                    <el-form-item :rules="[{ required: true, message: '请填写标题', trigger: 'blur'}]" label="标题：" prop="title">
                        <el-input clearable v-model="form.title" placeholder="请填写标题"></el-input>
                    </el-form-item>
                    <el-form-item label="类目：" prop="cate_id" :rules="[{ required: true, message: '请选择类目', trigger: 'blur'}]">
                        <el-cascader placeholder="请选择类目"
                                     separator=">"
                                     :options="categoys"
                                     expand-trigger="hover"
                                     v-model="form.cate_id">
                        </el-cascader>
                    </el-form-item>
                    <el-form-item :rules="[{ required: true, message: '请上传封面图', trigger: 'blur'}]" label="封面图：" prop="thumb">
                        <el-upload
                                class="ad-uploader"
                                :action="upload_image"
                                :show-file-list="false"
                                name="image"
                                :limit="1"
                                :on-success="uploadSuccess"
                                :before-upload="uploadBefore" ref="upload">
                            <img v-if="form.thumb" :src="form.thumb" class="ad-img">
                            <i v-else class="el-icon-plus ad-uploader-icon"></i>
                            <div slot="tip" class="el-upload__tip">图片大小不能超过 2MB，建议尺寸3:2!</div>
                        </el-upload>
                    </el-form-item>
                    <el-form-item :rules="[{ required: true, message: '请上传文件资源原件', trigger: 'blur'}]" label="资源原件：" prop="file_link">
                        <el-upload
                                class="ad-uploader"
                                :action="upload_file"
                                :show-file-list="false"
                                name="file"
                                :limit="1"
                                :on-success="uploadFileSuccess"
                                :before-upload="uploadFileBefore" ref="files1">
                            <div style="border: 1px solid #ccc; padding: 0 5px;" v-if="form.file_link">@{{ form.file_link }}</div>
                            <i v-else class="el-icon-plus ad-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item :rules="[{ required: true, message: '请上传文件资源pdf', trigger: 'blur'}]" label="资源pdf：" prop="show_link">
                        <el-upload
                                class="ad-uploader"
                                :action="upload_file"
                                :show-file-list="false"
                                name="file"
                                :limit="1"
                                :on-success="uploadFilePDFSuccess"
                                :before-upload="uploadFilePDFBefore" ref="files2">
                            <div style="border: 1px solid #ccc; padding: 0 5px;" v-if="form.show_link">@{{ form.show_link }}</div>
                            <i v-else class="el-icon-plus ad-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                </div>
                <div class="panel-header"> <div class="panel-title"> 其他信息 </div> </div>
                <div class="panel-main">
                    <el-form-item label="阅读量：" prop="view">
                        <el-input clearable v-model="form.view" placeholder="请填写阅读量"></el-input>
                    </el-form-item>
                    <el-form-item label="下载量：" prop="download">
                        <el-input clearable v-model="form.download" placeholder="请填写下载量"></el-input>
                    </el-form-item>
                    <el-form-item label="收藏量：" prop="collect">
                        <el-input clearable v-model="form.collect" placeholder="请填写收藏量"></el-input>
                    </el-form-item>
                    <el-form-item label="来源：" prop="source">
                        <el-input clearable v-model="form.source" placeholder="请填写信息来源"></el-input>
                    </el-form-item>
                    <el-form-item required label="热门：" required prop="hot">
                        <el-radio-group v-model="form.hot">
                            <el-radio :label="1" border>否</el-radio>
                            <el-radio :label="2" border>是</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item required label="状态：" required prop="status">
                        <el-radio-group v-model="form.status">
                            <el-radio :label="1" border>正常</el-radio>
                            <el-radio :label="2" border>锁定</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </div>
                <el-form-item style="padding-left: 150px;margin-top: 50px">
                    <el-button type="primary" @click="update()">保 存</el-button>
                    <el-button @click="back()" style="margin-left: 50px">返 回</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
@endsection
@section('scripts')
    <script src="{{ asset('neditor/neditor.config.js') }}" type="text/javascript"></script>
    <script src="{{ asset('neditor/neditor.all.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('neditor/neditor.service.js') }}" type="text/javascript"></script>
    <script src="{{ asset('neditor/i18n/zh-cn/zh-cn.js') }}" type="text/javascript"></script>
    <script src="{{ asset('neditor/third-party/browser-md5-file.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('neditor/third-party/jquery-1.10.2.min.js') }}" type="text/javascript"></script>
    <script>
        $(function () {
            let app = new Vue({
                el: '#app',
                data: function () {
                    return {
                        info: {!! $info !!},
                        upload_image: UPLOAD_IMAGE,
                        upload_file: UPLOAD_FILE,
                        form: {
                            id: " {{ $id }}",
                            title: '',
                            thumb: '',
                            cate_id: '',
                            // summary: '',
                            view: 0,
                            download: 0,
                            collect: 0,
                            format: '',
                            size: '',
                            source: '',
                            file_link: '',
                            show_link: '',
                            hot: 1,
                            good: 1,
                            status: 1,
                        },
                        categoys: {!! $categorys !!},
                        types:''//判断是否是pdf文件
                    }
                },
                created() {
                    if (this.form.id > 0) {
                        this.form = {
                            id: this.info.id,
                            title: this.info.title,
                            thumb: this.info.thumb,
                            cate_id: this.info.cate_id,
                            // summary: this.info.summary,
                            view: this.info.view,
                            download: this.info.download,
                            collect: this.info.collect,
                            format: this.info.format,
                            size: this.info.size,
                            source: this.info.source,
                            file_link: this.info.file_link,
                            show_link: this.info.show_link,
                            hot: this.info.hot,
                            good: this.info.good,
                            status: this.info.status,
                        };
                    }
                },
                methods: {
                    //上传图片
                    uploadSuccess(res) {
                        this.form.thumb = res.data.path;
                        this.$refs.upload.clearFiles(); //上传成功之后清除历史记录
                    },
                    uploadBefore(file) {
                        const isLt2M = file.size / 1024 / 1024 < 3;
                        if (!isLt2M) {
                            this.$message.error('图片大小不能超过 3MB!');
                        }
                        return isLt2M;
                    },
                    //上传文件
                    uploadFileSuccess(res) {
                        this.form.file_link = res.data.path;
                        this.$refs. files1 .clearFiles(); //上传成功之后清除历史记录
                    },
                    uploadFileBefore(file) {
                        // 计算文件大小函数(保留两位小数),Size为字节大小
                        // size：初始文件大小
                        let num = 1024.00; //byte
                        if (file.size < num){
                            this.form.size = file.size + "B";
                        }else if (file.size < Math.pow(num, 2)) { //kb
                            this.form.size = (file.size / num).toFixed(2) + "K";
                        }else if (file.size < Math.pow(num, 3)){ //M
                            this.form.size = (file.size / Math.pow(num, 2)).toFixed(2) + "M";
                        }else if (file.size < Math.pow(num, 4)){ //G
                            this.form.size = (file.size / Math.pow(num, 3)).toFixed(2) + "G";
                        }else { //T
                            this.form.size = (file.size / Math.pow(num, 4)).toFixed(2) + "T";
                        }
                        //文件类型
                        let index1=file.name.lastIndexOf(".");
                        let index2=file.name.length;
                        let type=file.name.substring(index1+1,index2);
                        this.form.format = type;
                    },
                    //上传文件
                    uploadFilePDFSuccess(res) {
                        this.form.show_link = res.data.path;
                        this.$refs.files2.clearFiles(); //上传成功之后清除历史记录
                    },
                    uploadFilePDFBefore(file) {
                        //文件类型
                        let index1=file.name.lastIndexOf(".");
                        let index2=file.name.length;
                        this.types =file.name.substring(index1+1,index2);
                    },
                    //返回
                    back() {
                        window.history.go(-1);
                    },
                    //更新
                    update() {
                        this.form._token = "{{csrf_token()}}";
                        this.$refs['form'].validate((valid) => {
                            console.log(this.types);
                            if(this.types != '' && this.types != 'pdf'){
                                this.$message.error('请上传PDF文件!');
                                return false;
                            }
                            if (valid) {
                                let that = this;
                                $.post("{{ route('admin.word.update') }}", this.form, function (res) {
                                    if (res.code) {
                                        that.$message.error(res.msg);
                                    } else {
                                        that.$message({
                                            type: 'success',
                                            duration: '1000',
                                            message: res.msg,
                                            onClose: () => {
                                                window.history.go(-1);
                                            }
                                        });
                                    }
                                }, 'JSON');
                            }
                        });
                    },
                }
            });
        });
    </script>
@endsection
